<script lang="ts" setup>
// @ts-nocheck  // 此行会忽略当前组件所有TS错误
import { ref, onMounted, Ref,getCurrentInstance } from "vue";
import nestedDraggable from "./nestedDraggable.vue"; // 注意文件名拼写：neasted → nested

const $global=getCurrentInstance()?.appContext.config.globalProperties;
const emit=defineEmits(['edit']);
// 拖拽列表数据
const dragList:Ref<AttackItem[]> = ref([]);
const nestedTestRef = ref(null);
interface AttackItem {
    beginTime: number,
    name: string,
    id:number,//自动指定
    icon:string,
    delay:number,
    elements: AttackItem[]
}
// 获取数据逻辑
const getPromptGroup = async () => {
  dragList.value = [...$global.$bossData.value[$global.$deadSplitData.value.currentBoss]]
  /* [
    { 
      id: 1, 
      name: "火焰喷射", 
      beginTime: 0, 
      icon: "fire.png", 
      delay: 0,
      elements: [] 
    },
    { 
      id: 2, 
      name: "冰冻射线", 
      beginTime: 5, 
      icon: "ice.png", 
      delay: 1,
      elements: [] 
    },
    { 
      id: 3, 
      name: "雷电打击", 
      beginTime: 10, 
      icon: "thunder.png", 
      delay: 0.5,
      elements: [
        { 
          id: 11, 
          name: "闪电链", 
          beginTime: 10, 
          icon: "lightning.png", 
          delay: 0,
          elements: [] 
        }
      ] 
    },
    { 
      id: 4, 
      name: "召唤小怪", 
      beginTime: 15, 
      icon: "summon.png", 
      delay: 2,
      elements: [
        { 
          id: 12, 
          name: "骷髅兵", 
          beginTime: 17, 
          icon: "skeleton.png", 
          delay: 0,
          elements: [] 
        },
        { 
          id: 13, 
          name: "巫师", 
          beginTime: 18, 
          icon: "wizard.png", 
          delay: 0.5,
          elements: [] 
        }
      ] 
    },
    { 
      id: 5, 
      name: "地震", 
      beginTime: 25, 
      icon: "earthquake.png", 
      delay: 1.5,
      elements: [] 
    },
    { 
      id: 6, 
      name: "全屏爆炸", 
      beginTime: 30, 
      icon: "explosion.png", 
      delay: 3,
      elements: [] 
    }
  ];; */
};

// 接收子组件更新的列表
const handleUpdate = (newList) => {
  dragList.value = newList;
};

// 获取最新列表（暴露给父组件）
const getList = () => {
  return dragList.value || [];
};
const count=$global.$autoIncreament;

/* const countAllItems = (items: AttackItem[]): number => {

  
  // 遍历当前层级的每个元素
  items.forEach(item => {
    // 计数当前元素
    count.value++;
    
    // 如果有子元素，递归计算并累加
    if (item.elements && item.elements.length > 0) {
      count.value += countAllItems(item.elements);
    }
  });
  
  return count.value;
}; */
const addItem = (obj: AttackItem) => {

  obj.id=++count.value;
  console.log(obj)
  ElMessage.success("添加成功")
  return dragList.value.push(obj);
};
// 挂载时加载数据
onMounted(async () => {
  if (dragList.value.length === 0) {
    await getPromptGroup();
  }
});
const isShow = ref(false);
const show2=ref(false);
/* const handleShow = () => {
    console.log("show")
  isShow.value = true;
}; */
// 暴露方法给父组件

// 处理项目选项点击
const handleItemOptions = /* async */ (data) => {
  emit('edit',data)
  // 模拟修改名称
  /* const newName = prompt('请输入新名称', data.name);
  if (newName && newName !== data.name) {
    // 调用子组件的更新方法
    await nestedTestRef.value.updateItem(data.id, { name: newName });
    console.log(`已更新项目 ${data.id} 名称为: ${newName}`);
  } */
};

// 处理项目更新事件
const updateItem = async (data) => {
  //console.log('项目已更新:', data);
  await nestedTestRef.value.updateItem(data.id, data);
};
defineExpose({ getList,addItem,updateItem,getPromptGroup });
</script>

<template>
  <!-- 外层容器：点击空白处也触发隐藏（兜底） -->
  <div>
    <el-scrollbar style="padding: 0;">
       <div class="empty-content" v-if="dragList.length === 0">

        <p class="empty-text">Current No Attacks Added</p>
      </div>
    <nestedDraggable
      v-else
      ref="nestedTestRef"
      :list="dragList"
      :is-top-level="true" 
      :isShow
      :show2
       @item-options="handleItemOptions"
        
      @show="isShow = true;"
      @show2="show2 = true;"
      @close="isShow = false;show2 = false"
      @update:modelValue="handleUpdate"
    /><!-- @update-item="handleItemUpdate" -->
  </el-scrollbar>
  </div>
</template>

<style scoped>
/* 外层点击区域：确保覆盖整个页面，点击空白处隐藏子容器 */
div {
  width: 99%;
  min-height: 460px;
  padding: 2rem;
}
.empty-content {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 99%;
  min-height: 450px;
  padding: 0%;
}



.empty-text {
  font-size: 16px;
  color: #606266;
}
</style>